import { Tabs, Popconfirm, message, Popover ,Divider,Button} from 'antd'
import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, Link } from 'umi'
import { queryBankCardList,updateBankCardStatus} from '../service'
import moment from 'moment';
import {bankcardTypeList} from "@/utils/constant";
import CreateForm from './components/CreateForm'
const  { TabPane } = Tabs;

const TableList = ({ global }) => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [tabIndex, setTabIndex] = useState("1");
  const {options = {}} = global;
  const {jobLevel = []} = options;
  const [visible, setVisible] = useState(null);
  const [record,setRecord] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleChangTabIndex = (key) => {
    setTabIndex(key)
    if(key === '1'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const determine = (id,status,remark) => {
    updateBankCardStatus(id,status,remark).then(res => {
      setLoading(true);
      if(res.flag){
        message.success('操作成功！');
        actionRef2.current && actionRef2.current.reload();
        actionRef.current &&  actionRef.current.reload();
      }else{
        message.error(res.error)
      }
      setLoading(false);
    })
  };

  const turnDown = (record) => {
    setRecord(record);
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const handleSubmit = (values) => {
    setVisible(false);
    determine(values.id,values.status,values.remark);
  };

  const handleCardExport = () => {
    window.open('/hr-ssc/api/api-admin/export/exportUserBankCard');
  };

  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
    },
    {
      title: '姓名',
      dataIndex: 'createName',
      width:60,
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '公司',
      dataIndex: 'orgname',
    },
    {
      title: '部门',
      dataIndex: 'unitname',
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
    },
    // {
    //   title: '职级',
    //   dataIndex: 'jobLevelId',
    //   hideInSearch: true,
    //   render: (text) =>{
    //     const res = jobLevel.find((item) => item.id === text);
    //     return res ? res.name : text
    //   }
    // },
    {
      title: '开户银行',
      hideInSearch: true,
      dataIndex: 'bankAccount',
      key:'bankAccount',
    },
    {
      title: '所属支行',
      hideInSearch: true,
      dataIndex: 'subBranch',
      key:'subBranch',
    },
    {
      title: '银行卡号',
      hideInSearch: true,
      dataIndex: 'bankcardNum',
      key:'bankcardNum',
    },
    {
      title: '银行卡正面',
      dataIndex: 'idcardUpUrl',
      hideInSearch: true,
      render: (url,item) =>{
        return <Popover content={<img width={600} alt='' src={url}/>} title={`银行卡号：${item.bankcardNum}`}>
          <a>预览</a>
      </Popover>
      }
    },
    {
      title: '银行卡反面',
      dataIndex: 'idcardDownUrl',
      hideInSearch: true,
      render: (url,item) =>{
        return <Popover content={<img width={600} alt='' src={url}/>} title={`银行卡号：${item.bankcardNum}`}>
          <a>预览</a>
        </Popover>
      }
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
      render: (text) =>{
        const res = bankcardTypeList.find((item) => item.value === parseInt(text));
        return res ? res.label : text
      }
    },
    {
      title: '生效时间',
      dataIndex: 'effectiveDate',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
    tabIndex !== '2'?{
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          <a onClick={() => turnDown(record)}>驳回修改</a>
          <Divider type="vertical"/>
          <Popconfirm title="是否确认变更？" cancelText='取消' okText='确认' onConfirm={() => determine(record.id,2,null)}>
            <a>确认变更</a>
          </Popconfirm>
        </>
      ),
    }:{},
  ];

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryBankCardList(params,tabIndex)}
            columns={columns}
          />
          <CreateForm
            loading={loading}
            record={record}
            visible={visible}
            onCancel={handleCancel}
            onSubmit={handleSubmit}
          />
        </TabPane>
        <TabPane tab="已办理" key="2">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryBankCardList(params,tabIndex)}
            columns={columns}
            toolBarRender={(action, { selectedRows }) => [
              <Button type="primary" onClick={handleCardExport}>导出工资卡信息</Button>,
            ]}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
};

export default connect(({global}) => ({
  global
}))(TableList)
